<template>
  <div class="card-container">
    <a-tabs
      v-model:activeKey="activeKey"
      hide-add
      type="editable-card"
      @edit="onEdit"
    >
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      >
        <component :is="pane.content"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import Index from "./Contents/Home/Index";
import SchoolInfo from "./Contents/UnitManagement/SchoolInfo";
import InstituteInfo from "./Contents/UnitManagement/InstituteInfo";
import TeamInfo from "./Contents/UnitManagement/TeamInfo";
import ResearchGroupInfo from "./Contents/UnitManagement/ResearchGroupInfo";
import Subject from "./Contents/SubjectManagement/Subject";
import MySubject from "./Contents/SubjectManagement/MySubject";
import SubjectAudit from "./Contents/Audit/SubjectAudit";
import ExperimentInfo from "./Contents/ExperimentManagement/ExperimentInfoManagement/ExperimentInfo";
import MyExperimentInfo from "./Contents/ExperimentManagement/ExperimentInfoManagement/MyExperimentInfo";
import ExperimentInfoAudit from "./Contents/Audit/ExperimentInfoAudit";
import ExperimentDesign from "./Contents/ExperimentManagement/ExperimentDesignManagement/ExperimentDesign";
import MyExperimentDesign from "./Contents/ExperimentManagement/ExperimentDesignManagement/MyExperimentDesign";
import ExperimentProcedure from "./Contents/ExperimentManagement/ExperimentProcedureManagement/ExperimentProcedure";
import MyExperimentProcedure from "./Contents/ExperimentManagement/ExperimentProcedureManagement/MyExperimentProcedure";
import ExperimentProcedureAudit from "./Contents/Audit/ExperimentProcedureAudit";
import Assay from "./Contents/ExperimentManagement/AssayManagement/Assay";
import MyAssay from "./Contents/ExperimentManagement/AssayManagement/MyAssay";

import SampleInfo from "./Contents/PropertyManagement/SampleInfoManagement/SampleInfo";
import MacroMorphology from "./Contents/PropertyManagement/MorphologyManagement/MacroOrganization";
import MicroMorphology from "./Contents/PropertyManagement/MorphologyManagement/micro_structure";
import ChemicalProperty from "./Contents/PropertyManagement/ChemicalPropertyManagement/ChemicalProperty";
import MyChemicalProperty from "./Contents/PropertyManagement/ChemicalPropertyManagement/MyChemicalProperty";
import PhysicalProperty from "./Contents/PropertyManagement/PhysicalPropertyManagement/PhysicalProperty";
import MyPhysicalProperty from "./Contents/PropertyManagement/PhysicalPropertyManagement/MyPhysicalProperty";
import TensileMechanicalProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/TensileMechanicalPropertyManagement/TensileMechanicalProperty";
import CompactionMechanicalProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/CompactionMechanicalPropertyManagement/CompactionMechanicalProperty";
import ShearProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/ShearPropertyManagement/ShearProperty";
import BendingProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/BendingPropertyManagement/BendingProperty";
import TorsionProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/TorsionPropertyManagement/TorsionProperty";
import FractureProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/FracturePropertyManagement/FractureProperty";
import FrictionAndWearProperty from "./Contents/PropertyManagement/MechanicalPropertyManagement/FrictionAndWearPropertyManagement/FrictionAndWearProperty";
import Hardness from "./Contents/PropertyManagement/MechanicalPropertyManagement/HardnessManagement/Hardness";
import ServiceProperty from "./Contents/PropertyManagement/ServicePropertyManagement/ServiceProperty";

import AlloyPhaseDiagram from "./Contents/AttachmentManagement/AlloyPhaseDiagram";
import UserInfo from "./Contents/UserManagement/UserInfo";
import UserGroup from "./Contents/UserManagement/UserGroup";

export default {
  name: "tabContent",
  props: ["newPane"],
  components: {
    Index,
    SchoolInfo,
    InstituteInfo,
    TeamInfo,
    ResearchGroupInfo,
    Subject,
    MySubject,
    SubjectAudit,
    ExperimentInfo,
    MyExperimentInfo,
    ExperimentInfoAudit,
    ExperimentDesign,
    MyExperimentDesign,
    ExperimentProcedure,
    MyExperimentProcedure,
    ExperimentProcedureAudit,
    Assay,
    MyAssay,

    SampleInfo,
    MacroMorphology,
    MicroMorphology,
    ChemicalProperty,
    MyChemicalProperty,
    PhysicalProperty,
    MyPhysicalProperty,
    TensileMechanicalProperty,
    CompactionMechanicalProperty,
    ShearProperty,
    BendingProperty,
    TorsionProperty,
    FractureProperty,
    FrictionAndWearProperty,
    Hardness,
    ServiceProperty,

    AlloyPhaseDiagram,
    UserInfo,
    UserGroup,
  },
  mounted() {
    this.panes.push({
      title: "主页",
      content: "Index",
      key: "index",
      closable: false,
    });
    this.activeKey = this.panes[0].key;
  },
  data() {
    const panes = [];
    return {
      activeKey: "",
      panes,
      newTabIndex: 0,
    };
  },
  watch: {
    // 监听父组件newPane的值，以根据父组件的操作动态添加标签页
    newPane(val) {
      const key = val.key;
      const title = val.title;
      if (key.length !== 0) {
        const findKey = this.panes.find((item) => item.key === key);
        // console.log('findKey', findKey)
        if (findKey === undefined) {
          const panes = this.panes;
          const content = key.replace(key[0], key[0].toUpperCase());
          panes.push({
            title: title,
            content: content,
            key: key,
          });
          this.panes = panes;
        }
        this.activeKey = key;
      } else {
        console.log("error: get null key on add new tab");
      }
    },
  },
  methods: {
    onEdit(targetKey, action) {
      // console.log(targetKey, action)
      this[action](targetKey);
    },
    remove(targetKey) {
      // console.log(this.activeKey)
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.panes.filter((pane) => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.panes = panes;
      this.activeKey = activeKey;
    },
  },
};
</script>

<style>
.card-container {
  overflow: hidden;
}

.card-container > .ant-tabs-card > .ant-tabs-content {
  /* height: 120px; */
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  /* padding: 16px;  */
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

/* .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
} */

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
</style>
